.featured-demos {
  color: $color-gray-boulder;
  font-family: $font-family-headline;
  font-weight: $font-weight-light;
  font-size: 19px;
  padding-top: 32px;
  padding-bottom: 64px;
  position: relative;
  text-align: center;
  &:before,
  &:after {
   background: $color-white-alabaster;
   content: ".";
   display: block;
   height: 2px;
   overflow: hidden;
   position: absolute;
   text-indent: -9999px;
   top: -1px;
   white-space: nowrap;
   width: 100%;
  }
  &:after {
    bottom: -1px;
    top: auto;
  }
  article {
    min-width: $container-min-width;
  }
  h2 {
    @extend %headline;
    @include span(5);
    color: $color-gray-dovegray;
    float: none;
    font-size: 32px;
    margin: 0 auto;
    margin-bottom: 8px;
    &:before {
      @include image-replace('arrow-up-circle', 'svg', 38px, 38px);
      @include prefixer(background-size, 38px, webkit moz o spec);
      content: ".";
      margin: 0 auto 4px;
    }
  }
  p {
    @include span(4.5);
    float: none;
    margin: 0 auto;
  }
  ul {
    clear: both;
    display: flex;
    height: 342px;
    left: 50%;
    list-style: none;
    margin-left: -941px * .5;
    position: absolute;
    top: -342px;
    width: 941px;
    li {
      float: left;
      margin-right: 27px;
      position: relative;
      width: 295px;      
      &:last-child,
      &.marketplace {
        float: right;
        margin-right: 0;
      }
      &.seafood {
        a {
          background-image: url($img-path + 'featured-demo-seafood.png');
          @include image-retina('featured-demo-seafood', 'png', 100%, 262px);
        }
      }
      &.bond {
        a {
          background-image: url($img-path + 'featured-demo-bond.png');
          @include image-retina('featured-demo-bond', 'png', 100%, 262px);
        }
      }
      &.marketplace {
        a {
          background-image: url($img-path + 'featured-demo-marketplace.png');
          @include image-retina('featured-demo-marketplace', 'png', 100%, 262px);
        }
      }
      a {
        @include prefixer(box-shadow, 0 0 12px 0 rgba(0,0,0,0.15), webkit moz spec);
        background-color: white;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% auto;
        color: $color-gray;
        display: block;
        font-family: $font-family;
        font-size: 13px;
        height: 342px;
        padding: 70px 16px 0;
        position: relative;
        text-decoration: none;
        &:hover {
          @include prefixer(box-shadow, 0 0 12px 0 rgba(0,0,0,0.5), webkit moz spec);
          margin-top: -50px;
        }
        span {
          color: white;
          display: block;
          font-family: $font-family-headline;
          font-size: 17px;
          font-weight: $font-weight-semibold;
          line-height: 1.9em;
          margin-bottom: 141px;
          text-transform: uppercase;
          b {
            display: block;
            font-size: 32px;
            font-weight: $font-weight-bold;
          }
        }
      }
      &.coming-soon {
        a {
          &:hover {
            @include prefixer(box-shadow, 0 0 12px 0 rgba(0,0,0,0.3), webkit moz spec);
            margin-top: 0px;
            &:before {
              background: rgba(0,0,0,.35);
            }
          }
          &:before {
            background: rgba(0,0,0,.25);
            content: ".";
            display: block;
            height: 342px;
            left: 0;
            overflow: hidden;
            position: absolute;
            text-indent: -9999px; 
            top: 0;
            white-space: nowrap; 
            width: 295px;
          }
        }
        > span {
          background-image: url($img-path + 'coming-soon.png');
          @include image-retina('coming-soon', 'png', 208px, 63px);
          @include prefixer(transform, rotate(45deg), ms webkit moz o spec);
          color: white;
          display: block;
          font-family: $font-family-title;
          font-size: 24px;
          font-weight: $font-weight-light;
          height: 63px;
          line-height: .8em;
          padding-top: 8px;
          position: absolute;
          right: -54px;
          text-transform: uppercase;
          top: 19px;
          width: 208px;
          b {
            display: block;
            font-family: $font-family-headline;
            font-size: 12px;
            font-weight: $font-weight-bold;
          }
        }
      }
    }
  }
}